<template>
	<view class="">
		<view class="nightBox">
			<view class="nightBoxContent">
				<view class="ContentText">
					高效服务 专属客服团队在线售后
				</view>
				<view class="ContentTextBox">
					<view class="TextBox-item">
						致力于提供一流的解决方案和服务
					</view>
					<view class="TextBox-item">
						推动企业数字化，智能化发展
					</view>
				</view>
				<view class="ContentTextBox">
					<up-input class="botInp" v-model="phoneNumber" placeholder="请输入手机号体验试用" border="surround" clearable>
						<template #suffix>
							<!-- <up-code ref="uCodeRef" @change="codeChange" seconds="20" changeText="X秒重新获取哈哈哈"></up-code> -->
							<up-button @click="getPhoneCode"
								style="background-color: #303030; height: 42rpx; line-height: 42rpx; border-radius: 30rpx; color: #fff;"
								:text="tipPlay" size="mini"></up-button>
						</template>
					</up-input>
					<up-toast ref="uToastRef"></up-toast>
				</view>
			</view>
		</view>

		<view class="tenBox">
			<view class="tenBoxImg">
				<image src="@/static/dashabordImg/headerLog.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="elevenBox">
			<view class="eleven-title">
				<view class="eleven-titleLeft">
					产品介绍
				</view>
				<view class="iconfont fa-shangxiajiantou" @click="handleProduct" v-if="isShowProduct">
				</view>
				<view class="iconfont fa-shangxiajiantou1" @click="handleProduct" v-else>

				</view>
			</view>
			<view class="elevenList" :class="{'isShowProduct' : !isShowProduct}">
				<view class="eleven-item" @click="handleNavigatToRobot">
					<view class="iconfont fa-jiqiren1">

					</view>
					<view class="iconfontText">
						AI电话机器人
					</view>
				</view>
				<view class="eleven-item" @click="handleNavigatTogroup">
					<view class="iconfont fa-jianting">

					</view>
					<view class="iconfontText">
						群呼系统
					</view>
				</view>
				<view class="eleven-item" @click="handleNavigatToCrm">
					<view class="iconfont fa-a-caidantubiaotuozhan09_caidan">

					</view>
					<view class="iconfontText">
						CRM管理系统
					</view>
				</view>
				<view class="eleven-item" @click="handleNavigatToBigData">
					<view class="iconfont fa-shenfenrenzheng">

					</view>
					<view class="iconfontText">
						大数据线索
					</view>
				</view>

				<view class="eleven-item" @click="handleNavigatToSales">
					<view class="iconfont fa-cunchu">

					</view>
					<view class="iconfontText">
						防封电销卡
					</view>
				</view>

				<view class="eleven-item" @click="handleNavigatToCallback">
					<view class="iconfont fa-dianhua">

					</view>
					<view class="iconfontText">
						回拨系统
					</view>
				</view>
			</view>
			<view class="line">

			</view>
		</view>

		<view class="elevenBox linter">
			<view class="eleven-title">
				<view class="eleven-titleLeft">
					服务保障
				</view>
				<view class="iconfont fa-shangxiajiantou" @click="handleGuarantee" v-if="isShowGuarantee">
				</view>
				<view class="iconfont fa-shangxiajiantou1" @click="handleGuarantee" v-else>

				</view>
			</view>
			<view class="elevenList" :class="{'isShowGuarantee' : !isShowGuarantee}">
				<view class="eleven-item" @click="handleNavigatToService">
					<view class="iconfont fa-anquanbaozhang">

					</view>
					<view class="iconfontText">
						服务保障
					</view>
				</view>
				<view class="eleven-item" @click="handleNavigatToHelp">
					<view class="iconfont fa-kanshu">

					</view>
					<view class="iconfontText">
						帮助中心
					</view>
				</view>
			</view>
			<view class="line">

			</view>
		</view>

		<view class="elevenBox linter">
			<view class="eleven-title">
				<view class="eleven-titleLeft">
					联系我们
				</view>
				<view class="iconfont fa-shangxiajiantou" @click="handleContact" v-if="isShowContact">
				</view>
				<view class="iconfont fa-shangxiajiantou1" @click="handleContact" v-else>

				</view>
			</view>
			<view class="elevenList" :class="{'isShowContact' : !isShowContact}">
				<view class="eleven-item" @click="handleNavigatToCompany">
					<view class="iconfont fa-guanyu">

					</view>
					<view class="iconfontText">
						关于呼大侠
					</view>
				</view>
				<view class="eleven-item">
					<view class="iconfont fa-jiarubanji">

					</view>
					<view class="iconfontText">
						加入呼大侠
					</view>
				</view>
				<view class="eleven-item">
					<view class="iconfont fa-bodadianhua">

					</view>
					<view class="iconfontText">
						联系方式：027-886-00002
					</view>
				</view>
				<view class="eleven-item">
					<view class="iconfont fa-dizhi">

					</view>
					<view class="iconfontText">
						地址：湖北省武汉市东湖新技术开发区关东街道雄庄路曙光星城D区3号楼605-1
					</view>
				</view>
			</view>
			<view class="line">

			</view>
		</view>

		<view class="twelveBox">
			<view class="twelveBoxContent">
				<view class="ContentImg">
					<image src="../../static/qord.jpg" mode=""></image>
				</view>
				<view class="ContentText">
					© 鄂ICP备2023021522号-1
				</view>
				<view class="ContentDi">
					<view class="ContentDi-item" @click="handleShowSeekAdvice">
						<view class="iconfont fa-zixun-tousu">

						</view>
						<view class="iconfontTex">
							在线咨询
						</view>
					</view>
					<view class="ContentDi-item" @click="handleShowSignup">
						<view class="iconfont fa-lijizhuce">

						</view>
						<view class="iconfontTex">
							立即试用
						</view>
					</view>
				</view>
			</view>
		</view>
		<up-modal :show="showSignUp" @confirm="handleConfirm" title="立即试用" ref="uModal" @cancel="handleClose"
			showCancelButton cancelText="取消" confirmText="立即拨打">
			<view class="hello">
			    <view class="iconfont fa-bodadianhua"></view>
			    <view>电话联系:</view>
			    <view>13261388898</view>
			  </view>
			<!-- <up-form labelPosition="left" :model="SignUpForm" labelWidth="50" :rules="rules" ref="signRefForm">
				<up-form-item label="姓名:" required prop="name" borderBottom>
					<up-input v-model="SignUpForm.name" placeholder="请输入姓名"></up-input>
				</up-form-item>
				<up-form-item label="手机号:" required prop="phone">
					<up-input v-model="SignUpForm.phone" placeholder="请输入手机号"></up-input>
				</up-form-item>
			</up-form> -->
		</up-modal>

		<up-modal :show="showSeekAdvice" @confirm="handleSeekConfirm" ref="uSeekModal" @cancel="handleSeekClose"
			showCancelButton cancelText="取消" confirmText="提交留言">
			<view class="modalBox">
				<view class="modalBox-title">
					<view class="titleImage">

					</view>
					<view class="titleBox">
						<view class="titleText">
							呼大侠来帮您！
						</view>
						<view class="titleTex">
							为您在线解答售前(5x8)、售后咨询(7x24)服务
						</view>
					</view>
				</view>
				<view class="modalBoxContent">
					<view class="ContentBox">
						<view class="ContentBox-text">
							您好，当前客服已离线，您可以留下联系方式，工作人员会第一时间给予您回复！
						</view>
						<up-form labelPosition="right" ref="seekRef" :model="seekForm" labelWidth="70"
							:rules="seekRules">
							<up-form-item label="姓名:" required prop="name" borderBottom>
								<up-input v-model="seekForm.name" placeholder="请输入姓名"></up-input>
							</up-form-item>
							<up-form-item label="手机号:" required prop="phone">
								<up-input v-model="seekForm.phone" placeholder="请输入手机号"></up-input>
							</up-form-item>
							<up-form-item label="留言内容:" prop="leave_message">
								<up-input v-model="seekForm.leave_message" type="textarea"
									placeholder="请输入留言内容"></up-input>
							</up-form-item>
						</up-form>
					</view>
				</view>
			</view>
		</up-modal>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue'
	import api from '../../utils/request.js'
	const showSignUp = ref(false)
	const SignUpForm = ref({
		name: "",
		phone: ""
	})
	const signRefForm = ref(null)
	const rules = ref({
		name: [{
			type: 'string',
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change']
		}],
		phone: [{
				type: 'string',
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			},
			{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					// uni.$u.test.mobile()就是返回true或者false的
					if (!/^1[3456789]\d{9}$/.test(value)) {
						callback(new Error("手机号码有误，请重填"));
					} else {
						callback();
					}
					// return uni.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				// 触发器可以同时用blur和change
				trigger: ['change', 'blur'],
			}
		]
	})

	const seekForm = ref({
		name: "",
		phone: "",
		leave_message: ""
	})
	const seekRef = ref(null)
	const seekRules = ref({
		name: [{
			type: 'string',
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change']
		}],
		phone: [{
				type: 'string',
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			},
			{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					// uni.$u.test.mobile()就是返回true或者false的
					if (!/^1[3456789]\d{9}$/.test(value)) {
						callback(new Error("手机号码有误，请重填"));
					} else {
						callback();
					}
					// return uni.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				// 触发器可以同时用blur和change
				trigger: ['change', 'blur'],
			}
		]
	})
	const showSeekAdvice = ref(false)
	const isShowProduct = ref(true)
	const isShowContact = ref(true)
	const isShowGuarantee = ref(true)
	const phoneNumber = ref('')
	const uToastRef = ref(null)
	const tips = ref('立即试用')
	const tipPlay = ref('立即试用')
	const show = ref(true)
	const list = ref([])
	const title = ref('')
	const codeChange = function() {

	}
	const getPhoneCode = function() {
		if (!phoneNumber.value) {
			uToastRef.value.show({
				type: 'error',
				icon: false,
				message: "请输入手机号",
			})
			return;
		}
		if (!/^1[3456789]\d{9}$/.test(phoneNumber.value)) {
			uToastRef.value.show({
				type: 'error',
				icon: false,
				message: "手机号码有误",
			})
		} else {
			api.post('v1/home/addTryUser', {
				phone: phoneNumber.value
			}).then((res) => {
				if (res.code !== 0) {} else {
					uToastRef.value.show({
						type: 'success',
						icon: false,
						message: res.msg,
					})
					phoneNumber.value = ""
				}
			}).catch(err => {

			})
		}
	}

	const handleProduct = function() {
		isShowProduct.value = !isShowProduct.value
	}
	const handleContact = function() {
		isShowContact.value = !isShowContact.value
	}
	const handleGuarantee = function() {
		isShowGuarantee.value = !isShowGuarantee.value
	}
	const handleNavigatToCompany = function() {
		uni.navigateTo({
			url: '/pages/companyProfile/index'
		})
	}
	const handleNavigatToService = function() {
		uni.navigateTo({
			url: '/pages/service/index'
		})
	}
	const handleNavigatToHelp = function() {
		uni.navigateTo({
			url: '/pages/helpCenter/index'
		})
	}
	const handleNavigatTogroup = function() {
		uni.navigateTo({
			url: '/pages/groupCall/index'
		})
	}
	const handleNavigatToCrm = function() {
		uni.navigateTo({
			url: '/pages/crm/index'
		})
	}
	const handleNavigatToBigData = function() {
		uni.navigateTo({
			url: '/pages/bigData/index'
		})
	}
	const handleNavigatToRobot = function() {
		uni.navigateTo({
			url: '/pages/callRobot/index'
		})
	}
	const handleNavigatToSales = function() {
		uni.navigateTo({
			url: '/pages/salesCard/index'
		})
	}
	const handleNavigatToCallback = function() {
		uni.navigateTo({
			url: '/pages/callBackSys/index'
		})
	}
	const handleShowSignup = function() {
		SignUpForm.value = {
			name: "",
			phone: ""
		}
		showSignUp.value = true;
	}
	const handleShowSeekAdvice = function() {
		showSeekAdvice.value = true;
		seekForm.value = {
			name: "",
			phone: "",
			leave_message: ""
		}
		nextTick(() => {
			seekRef.value.clearValidate()
		})
	}
	const handleConfirm = function() {
		uni.makePhoneCall({
		        phoneNumber: '13261388898', // 电话号码
		        success: function () {
		          console.log('拨打电话成功');
		        },
		        fail: function () {
		          console.log('拨打电话失败');
		        }
		      });
		// signRefForm.value.validate().then((valid) => {
		// 	if (valid) {
		// 		api.post('v1/home/addTryUser', SignUpForm.value).then((res) => {
		// 			if (res.code !== 0) {} else {
		// 				uni.showToast({
		// 					title: res.msg,
		// 					icon: 'success',
		// 					duration: 3000
		// 				})
		// 				showSignUp.value = false;
		// 			}
		// 		}).catch(err => {
		// 			uni.showToast({
		// 				title: err.msg,
		// 				icon: 'error',
		// 				duration: 3000
		// 			})
		// 		})
		// 		showSignUp.value = false;
		// 	}
		// })

	}
	const handleSeekConfirm = function() {
		seekRef.value.validate().then((valid) => {
			if (valid) {
				// showSignUp.value = false;
				api.post('v1/home/addTryUser', seekForm.value).then((res) => {
					if (res.code !== 0) {} else {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 3000
						})
						showSeekAdvice.value = false;
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'error',
						duration: 3000
					})
				})
			}
		})
	}
	const handleClose = function() {
		showSignUp.value = false;
	}
	const handleSeekClose = function() {
		showSeekAdvice.value = false;
	}
</script>

<style lang="scss" scoped>
	@import '@/static/icon/iconfont.css';

	:deep(.u-modal__content) {
		padding: 0 !important;
	}
	:deep(.u-form-item__body__left__content__label) {
		font-size: 25rpx;
	}
	
	:deep(.uni-input-placeholder) {
		font-size: 24rpx;
	}
	:deep(.u-input__content__field-wrapper__field){
		height: 0;
	}
	:deep(.u-modal__button-group__wrapper__text){
		font-size: 28rpx;
	}
	:deep(.u-modal__title){
		font-size: 28rpx;
	}
	.hello {
	  width: 100%;
	  height: 60px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 10px;
	  font-size: 16px;
	  .fa-bodadianhua {
	    color: #006bec;
	  }
	}
	.modalBox {
		width: 100%;
		height: 100%;

		.modalBox-title {
			height: 118rpx;
			background-color: #4269da;
			display: flex;
			align-items: center;
			padding-left: 26rpx;

			.titleImage {
				width: 78rpx;
				height: 78rpx;
			}

			.titleBox {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: self-start;

				.titleText {
					font-size: 26rpx;
					font-weight: 550;
					color: #fff;
				}

				.titleTex {
					font-size: 23rpx;
					font-weight: 500;
					color: #fff;
				}
			}
		}

		.modalBoxContent {
			padding: 10rpx 30rpx;

			.ContentBox {
				.ContentBox-text {
					font-size: 25rpx;
				}

				:deep(.u-form-item__body__left__content__label) {
					font-size: 25rpx;
				}

				:deep(.uni-input-placeholder) {
					font-size: 24rpx;
				}
			}
		}
	}

	.nightBox {
		height: 398rpx;
		background-color: #4771fa;
		padding: 25rpx 79rpx 0 79rpx;


		.nightBoxContent {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;

			.ContentText {
				color: #fff;
				font-size: 40rpx;
				font-weight: 600;
			}

			.ContentTextBox {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #fff;
				gap: 10rpx;
				font-size: 30rpx;
				font-weight: 500;

				.botInp {
					width: 90%;
					height: 47rpx;
					border-radius: 40rpx;
					padding: 5rpx 18rpx !important;
					border-color: #7d97e3 !important;
					background-color: #fff;
				}

				:deep(.uni-input-placeholder) {
					font-size: 24rpx;
				}
			}
		}
	}

	.tenBox {
		display: flex;
		align-items: center;
		margin-left: 45rpx;

		.tenBoxImg {
			width: 250rpx;

			image {
				width: 100%;
				height: auto;
			}
		}
	}

	.elevenBox {
		padding: 0 45rpx;

		.eleven-title {
			display: flex;
			justify-content: space-between;

			.fa-shangxiajiantou,
			.fa-shangxiajiantou1 {
				font-size: 36rpx;
			}

			.eleven-titleLeft {
				font-size: 28rpx;
			}
		}

		.isShowProduct {
			display: none !important;
		}

		.isShowContact {
			display: none !important;
		}

		.isShowGuarantee {
			display: none !important;
		}

		.elevenList {
			height: 100%;
			margin-top: 42rpx;
			display: flex;
			flex-direction: column;
			gap: 42rpx;

			.eleven-item {
				display: flex;
				align-items: center;
				gap: 10rpx;

				.fa-jiqiren1,
				.fa-dianhua,
				.fa-cunchu,
				.fa-shenfenrenzheng,
				.fa-a-caidantubiaotuozhan09_caidan,
				.fa-jianting,
				.fa-anquanbaozhang,
				.fa-kanshu,
				.fa-bodadianhua,
				.fa-dizhi,
				.fa-jiarubanji,
				.fa-guanyu {
					font-size: 25rpx;
				}

				.iconfontText {
					font-size: 26rpx;
					color: #606060;
				}
			}
		}

		.line {
			width: 100%;
			height: 2rpx;
			background-color: #ccc;
			margin-top: 90rpx;
		}
	}

	.linter {
		margin-top: 25rpx;
	}

	.twelveBox {
		height: 466rpx;
		display: flex;
		justify-content: center;

		.twelveBoxContent {
			width: 80%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;

			.ContentImg {
				width: 203rpx;
				height: 203rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.ContentText {
				color: #535353;
				font-size: 21rpx;
			}

			.ContentDi {
				width: 377rpx;
				display: flex;
				justify-content: space-between;

				.ContentDi-item {
					width: 115rpx;
					height: 95rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 12rpx;

					.iconfontTex {
						color: #616161;
						font-size: 26rpx;
					}

					.fa-zixun-tousu {
						font-size: 46rpx;
						color: #4269da;
					}

					.fa-lijizhuce {
						font-size: 40rpx;
						color: #4269da;
					}
				}
			}
		}
	}
</style>